<template>
	<view class="page" style="padding-bottom: 130rpx;">
		<uni-list :border="false">
			<uni-list-item v-if="type==1" :isBorder="true" padding="0rpx 0rpx">
				<view  slot="left" class="zy-btn" @click="uploadWord">
					添加文件
				</view>
				<view style="color: #00AA7F;overflow: hidden;width: 300rpx;margin-left: 20rpx;" class="slot-box slot-text" v-if="printDetails.uploadFileName">
					{{printDetails.uploadFileName}}
				</view>
				<view slot="right" class="zy-row" style="border: solid 1rpx #22aaaa;padding: 0rpx 15rpx;border-radius: 10rpx;"
				 @click="yulan">
					<zywork-icon type="iconyulan" :size="50" color="#22aaaa"></zywork-icon>
					<view class="">
						预览
					</view>
				</view>
			</uni-list-item>
			<view v-if="type==2||type==3" style="width: 100%;padding: 0rpx 30rpx;">
				<imgUpload :sourceType="sourceType" :itemList="itemList" :frontBaseUrl="frontBaseUrl" @preview="preview" :closeTip="true" :header="header"  :imgCount="uploadImgCount" :uploadImgCount="uploadImgCount" loading async :url="imgUrl" @result="resultUrl3" @delImg="delImg3"></imgUpload>
			</view>
			<uni-list-item :isBorder="true" padding="0rpx 0rpx">
				<view slot="left" class="slot-text">
					纸张类型
				</view>
				<view slot="right" class="slot-box">
					<v-tabs v-model="zzlxIndex" field="name" :fixed="false" :zIndex="0" pillsColor="#00aa7f" :tabs="zzlx" :pills="true"
					 line-height="0" activeColor="#fff" @change="changeTab"></v-tabs>
				</view>
			</uni-list-item>
			<uni-list-item :isBorder="true" padding="0rpx 0rpx">
				<view slot="left" class="slot-text">
					颜色
				</view>
				<view slot="right" class="slot-box">
					<v-tabs v-model="ysIndex" :fixed="false" :zIndex="0" field="name" pillsColor="#00aa7f" :tabs="ys"
					 :pills="true" line-height="0" activeColor="#fff" @change="changeColour"></v-tabs>
				</view>
			</uni-list-item>
			<uni-list-item :isBorder="true" padding="0rpx 0rpx">
				<view slot="left" class="slot-text">
					单双面
				</view>
				<view slot="right" class="slot-box">
					<v-tabs v-model="dsmIndex" :fixed="false" :zIndex="0" field="name" pillsColor="#00aa7f" :tabs="dsm"
					 :pills="true" line-height="0" activeColor="#fff" @change="changeFirstsd"></v-tabs>
				</view>
			</uni-list-item>
			<uni-list-item :isBorder="true" padding="6rpx 0rpx">
				<view slot="left" class="slot-text">
					页码范围
				</view>
				<view slot="right" class="slot-box">
					<input class="zy-input" type="text" v-model="printDetails.pageNumber1" @input="inputs"/>
					<view class="" style="color: #00AA7F;">
						—
					</view>
					<input class="zy-input" type="text" v-model="printDetails.pageNumber2" @input="inputs1"/>
				</view>
			</uni-list-item>
			<uni-list-item :isBorder="true" padding="12rpx 0rpx">
				<view slot="left" class="slot-text">
					打印数量
				</view>
				<view slot="right" class="slot-box">
					<yp-number-box @change="changeQuantity" :value="printDetails.dysl" :min="0" :max="9" />
				</view>
			</uni-list-item>
			<uni-list-item :isBorder="true" padding="18rpx 0rpx">
				<view slot="left" class="slot-text">
					缩印(多合一)
				</view>
				<view style="margin-left: 70rpx;color: #00AA7F;" class="slot-box slot-text" v-if="isShowPrintType">
					左右滑动选择
				</view>
				<view slot="right" class="zy-print-type" @click.stop="showPrintType">
					<view class="slot-box">
						<text style="margin-left: 10rpx;">{{printDetails.printTypeNumber}}</text>
						<zywork-icon :type="isShowPrintType?'iconshangsanjiaoxing':'iconxiasanjiaoxing'" color="#595959" size="30"></zywork-icon>
					</view>
				</view>
			</uni-list-item>
			<scroll-view v-if="isShowPrintType" :scroll-x="true" class="zy-protocol">
				<view class="view-content">

					<view class="popup-content" v-for="(item,index) in printTypeNumberList" :key="index">
						<view class="popup-column" :class="printTypeNumberIndex==index?'print-type-number-active':''" @click="changePrintType(index)">
							<view v-if="item.name.split(',').length<4" :class="printTypeNumberIndex==index?'view-active':''" v-for="(count,indxs) in item.name.split(',')">
								{{count}}
							</view>
							<view v-if="item.name.split(',').length>3" :class="printTypeNumberIndex==index?'view-active':''" class="view"
							 v-for="(count,indxs) in item.name.split(',')">
								{{count}}
							</view>
						</view>
						<text :style="printTypeNumberIndex==index?'color: #00aa7f':''">{{ item.name.split(',')[(item.name.split(',').length-1)]}}页/张</text>
					</view>
				</view>
			</scroll-view>
			<uni-list-item padding="26rpx 0rpx" :isBorder="true" title="装订" showExtraIcon="true" @click="bookbindingClick"
			 :rightText="bookbindingArr[bookbindingIndex].name" link>
			</uni-list-item>
			<uni-list-item v-if="type==1" :isBorder="false" padding="0rpx 0rpx" >
				<view slot="left" class="zy-btn" @click.stop="deletUpload">
					清空文件
				</view>
			</uni-list-item>
		</uni-list>
		<view class="zy-bootom">
			<view :class="printDetails.amount>0?'active':''">
				￥{{printDetails.amount > 0?printDetails.amount:'--'}}
			</view>
			<view :class="printDetails.amount>0?'active':''" @click="submit">
				下单
			</view>
		</view>
		<uni-popup ref="bookbinding" type="bottom">
			<scroll-view scroll-y="true" class="popup-bottom">
				<uni-list>
					<uni-list-item v-for="(item,index) in bookbindingArr" :isBorder="true" :title="item.name" showExtraIcon="true"
					 zyworkIconRightSize="40" @click="bookbindingChang(index)" zyworkIconRightColor="#00aa7f" :zyworkIcon="bookbindingIndex == index?'icongou':''"
					 link>
					</uni-list-item>
				</uni-list>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import zyworkIcon from '@/components/zywork-icon/zywork-icon.vue'
	import ypNumberBox from "@/components/yp-number-box/yp-number-box.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import imgUpload from '@/components/poiuy-uImgUpload/imgUpload.vue'
	import * as ResponseStatus from '@/common/response-status.js'
	import {
		BASE_URL,
		USER_TOKEN_KEY,
		DEFAULT_HEADICON,
		showSuccessToast,
		showInfoToast,
		doGet,
		doPostJson,
		nullToStr,
		FRONT_BASE_URL,
		LOCAL_FILE_STORAGE,
		USER_SCHOOL
	} from '@/common/util.js'
	export default {
		components: {
			uniList,
			uniListItem,
			zyworkIcon,
			ypNumberBox,
			uniPopup,
			imgUpload
		},
		data() {
			return {
				current: 0,
				uploadImgCount:6,
				imgUrl:BASE_URL+'/graphic-order/user/upload-word',
				frontBaseUrl: FRONT_BASE_URL,
				isShowPrintType: false,
				printDetails: {
					pageNumber1: 1,
					pageNumber2: 1,
					graphicId:"",
					dysl: 1,
					amount: 0,
					uploadFile:"",
					schoolId:uni.getStorageSync(USER_SCHOOL)
				},
				bookbindingIndex: 0,
				bookbindingArr: [{
						id: 1,
						name: "无装订"
					},
					{
						id: 2,
						name: "普通封面装订"
					},
					{
						id: 3,
						name: "铜版纸胶装订"
					},
					{
						id: 4,
						name: "精装"
					}
				],
				printTypeNumberIndex: 0,
				printTypeNumberList: [{
						title: "1页/张",
						number: "1"
					},
					{
						title: "2页/张",
						number: "1,2"
					},
					{
						title: "3页/张",
						number: "1,2,3"
					},
					{
						title: "4页/张",
						number: "1,2,3,4"
					},
					{
						title: "6页/张",
						number: "1,2,3,4,5,6"
					}
				],
				dsm:[],
				dsmIndex:0,
				ys:[],
				ysIndex:0,
				zzlx:[],
				zzlxIndex:0,
				header:{
					'Authorization': 'Bearer ' + uni.getStorageSync(USER_TOKEN_KEY),
					"App-Auth-appid": "wxxcxappid"
				},
				type: 0,
				itemList:[],
				filesUrl:"",
				sourceType: ['camera','album'], //从相机、相册选择
				totalAmount:0,
				listImg:[]
			};
		},
		onLoad(data) {
			if (data.id && data.type) {
				this.printDetails.graphicId = data.id
				this.type = data.type
				if(this.type==2){
					this.sourceType = ['album']
					this.itemList=['从相册中选择']
				}else if (this.type==3){
					this.sourceType = ['camera']
					this.itemList=['拍照选择']
				}
				doGet("/graphic-link/any/spec/" + this.printDetails.graphicId, {}, {}, true).then(response => {
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						this.zzlx = res.data.data.zzlx
						this.dsm = res.data.data.dsm
						this.ys = res.data.data.ys
						this.bookbindingArr = res.data.data.zhuangding
						this.printTypeNumberList = res.data.data.suoyin
						
						let number = this.printTypeNumberList[this.printTypeNumberIndex].name.split(',').length-1;
						this.printDetails.printTypeNumber = this.printTypeNumberList[this.printTypeNumberIndex].name.split(',')[number] +'页/张'
						this.queryTotalAmount()
						this.printDetails.suoyin = this.printTypeNumberList[this.printTypeNumberIndex].name
						this.printDetails.zhuangding = this.bookbindingArr[this.bookbindingIndex].name
						// this.printDetails.zzlx = this.zzlx[this.zzlxIndex].id
						// this.printDetails.ys = this.ys[this.ysIndex].id
						// this.printDetails.dsm = this.dsm[this.dsmIndex].id
						// this.printDetails.suoyin = this.printTypeNumberList[this.printTypeNumberIndex].id
						// this.printDetails.zhuangding = this.bookbindingArr[this.bookbindingIndex].id
						
					} else {
						showInfoToast(res.data.message);
					}
				}).catch(err => {
					console.log(err);
				})
			}
		},
		onShow() {},
		methods: {
			preview(index){
				var listImg =[]
				this.listImg.forEach(res=>{
					listImg.push(this.frontBaseUrl+res)
				})
				uni.previewImage({
					urls: listImg
				});
			},
			resultUrl3(e){
				//成功默认为0
				if(e.code==ResponseStatus.OK){
					this.listImg.push(e.data)
				
				}
			},
			delImg3(e){
				this.listImg.splice(e, 1);
			},
			inputs(e){
				console.log(e.detail.value)
				if(e.detail.value!=''){
					
					this.printDetails.pageNumber1 = parseInt(e.detail.value)
					if(this.printDetails.pageNumber1>this.printDetails.pageNumber2){
						this.printDetails.pageNumber1 = this.printDetails.pageNumber2
					}
					this.calculate();
				}
				
			},
			inputs1(e){
				console.log(e.detail.value)
				if(e.detail.value!=''){
					this.printDetails.pageNumber2 = parseInt(e.detail.value)
					if(this.printDetails.pageNumber2<this.printDetails.pageNumber1){
						this.printDetails.pageNumber2 = this.printDetails.pageNumber1
					}
					this.calculate();
					
				}
				
			},
			queryTotalAmount(){
				let data={
					zzlx:this.zzlx[this.zzlxIndex].name,
					ys:this.ys[this.ysIndex].name,
					dsm:this.dsm[this.dsmIndex].name
				}
				doPostJson("/graphic-link/any/specPrice/"+this.printDetails.graphicId, data, {}, true).then(response => {
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						this.totalAmount = res.data.data.price
						this.printDetails.specId = res.data.data.id
						
						this.calculate();
					} else {
						showInfoToast(res.data.message)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			calculate(){
				this.printDetails.amount =this.totalAmount* 
				(this.printDetails.pageNumber2 - this.printDetails.pageNumber1+1)*
				this.printDetails.dysl
			},
			uploadWord(){
				let that = this;
				uni.chooseMessageFile({
					count: 1,
					type: 'file',
					success(res) {
						//因为有一张图片， 输出下标[0]， 直接输出地址
						var filesUrl = res.tempFiles[0].path
						that.filesUrl = filesUrl;
						that.printDetails.uploadFileName = res.tempFiles[0].name
						// 上传图片
						// 做成一个上传对象
						uni.showLoading({
							title: '上传中'
						})
						var uper = uni.uploadFile({
							// 需要上传的地址
							url: that.imgUrl,
							// filePath  需要上传的文件
							filePath: filesUrl,
							name: 'file',
							header: that.header,
							success(uploadFileRes) {
								let res1 = JSON.parse(uploadFileRes.data);
								if (res1.code == 1001) {
									// 显示上传信息
									that.printDetails.uploadFile = res1.data
									showInfoToast(res1.message);
								} else {
									showInfoToast("上传失败");
								}
								
								uni.hideLoading()
							}
						});
					}
				})
			},
			deletUpload(){
				this.printDetails.uploadFileName=""
				this.filesUrl = ""
				this.printDetails.uploadFile =""
				this.$forceUpdate()
			},
			uploadImg() {
				
				let that = this;
				uni.chooseImage({
					count: 6,
					sizeType: ['copressed'],
					sourceType:this.sourceType,
					success(res) {
						//因为有一张图片， 输出下标[0]， 直接输出地址
						var imgFiles = res.tempFilePaths[0]
						that.filesUrl = imgFiles;
						// 上传图片
						// 做成一个上传对象
						uni.showLoading({
							title: '上传中'
						})
						var uper = uni.uploadFile({
							// 需要上传的地址
							url: BASE_URL+'/graphic-order/user/upload-word',
							// filePath  需要上传的文件
							filePath: imgFiles,
							name: 'file',
							header: that.header,
							success(uploadFileRes) {
								let res1 = JSON.parse(uploadFileRes.data);
								if (res1.code == 1001) {
									// 显示上传信息
									that.printDetails.uploadFile = res1.data
									that.printDetails.uploadFileName = res1.data.split("/")[res1.data.split("/").length-1]
									showInfoToast(res1.message);
								} else {
									showInfoToast("上传失败");
								}
								
								uni.hideLoading()
							}
						});
						// onProgressUpdate 上传对象更新的方法
						// uper.onProgressUpdate(function(res){
						// 	// 进度条等于 上传到的进度
						// 	_self.percent = res.progress
						// 	console.log('上传进度' + res.progress)
						// 	console.log('已经上传的数据长度' + res.totalBytesSent)
						// 	console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend)
						// })
					}
				})
			},
			yulan() {
				if(this.filesUrl){
					let url = this.frontBaseUrl +this.printDetails.uploadFile
					const type = this.filesUrl.split('.')[this.filesUrl.split('.').length - 1] // 截取文件后缀知晓类型.doc .txt 
					uni.showLoading({
						title: '正在打开'
					})
					uni.openDocument({
						filePath: this.filesUrl,
						fileType: type,   //文件类型
						success: function(res) {
							console.log('打开文档成功')
							uni.hideLoading();
						},
						fail() {
							uni.showToast({
								title: '暂不支持此类型',
								duration: 2000
							});
							uni.hideLoading();
						}
					})
				}else {
					showInfoToast("上传文件后才能预览");
				}
				
			},
			//纸张类型
			changeTab(index) {
				this.zzlxIndex = index;
				this.queryTotalAmount();
			},
			// 颜色
			changeColour(index) {
				this.ysIndex = index;
				this.queryTotalAmount();
			},
			// 单双面
			changeFirstsd(index) {
				this.dsmIndex = index;
				this.queryTotalAmount();
			},
			//打印数量
			changeQuantity(quantity) {
				console.log(quantity)
				this.printDetails.dysl = quantity
				this.calculate();
			},
			/* 选择每页打印多少张 */
			changePrintType(index) {
				this.printTypeNumberIndex = index   
				let number = this.printTypeNumberList[index].name.split(',').length-1;
				this.printDetails.printTypeNumber = this.printTypeNumberList[index].name.split(',')[number] +'页/张'
				this.calculate();
				
				this.printDetails.suoyin = this.printTypeNumberList[index].name
			},
			/* 选择装订类型弹窗 */
			bookbindingClick() {
				this.$refs.bookbinding.open()
			},
			/* 选择装订类型 */
			bookbindingChang(index) {
				this.bookbindingIndex = index
				this.$refs.bookbinding.close()
				this.printDetails.bookbindingId = this.bookbindingArr[index].id
				this.calculate();
				
				this.printDetails.zhuangding = this.bookbindingArr[this.bookbindingIndex].name
			},
			showPrintType() {
				if (this.isShowPrintType) {
					this.isShowPrintType = false
				} else {
					this.isShowPrintType = true
				}
			},
			submit() {
				console.log(this.printDetails)
				if(this.type==2||this.type==3){
					this.listImg.forEach((res,index)=>{
						this.printDetails.uploadFile+=res
						if(index<this.listImg.length-1){
							this.printDetails.uploadFile+=","
						}
					})
				}
				if(!this.printDetails.uploadFile){
					showInfoToast("请上传你要打印的文件");
					return
				}
				this.printDetails.ymfw=this.printDetails.pageNumber1+"-"+this.printDetails.pageNumber1
				doPostJson("/graphic-order/user/place", this.printDetails, {}, true).then(response => {
					let [error, res] = response;
					if (res.data.code === ResponseStatus.OK) {
						if(res.data.data){
							let orderId = res.data.data;
							this.submitAddress =false
							let type='dy'
							uni.redirectTo({
								url: `/pages/money/pay?orderIdAndNos=${orderId}&totalPay=${this.printDetails.amount}&types=${type}`
							})
						}
					} else {
						showInfoToast(res.data.message)
					}
				}).catch(err => {
					console.log(err)
				})

			}

		}
	}
</script>

<style lang="scss">
	@import '@/common/zywork-main.scss';

	.zy-btn {
		width: 200rpx;
		padding: 15rpx 0rpx;
		text-align: center;
		background-color: #00AA7F;
		color: #FFFFFF;
		border-radius: 15rpx;
		margin: 20rpx auto;
	}

	.zy-bootom {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		background-color: $primary-backcolor;
		padding: 30rpx $padding-left-right;
		@include flex-center-row;
		align-items: center;

		view:nth-child(1) {
			font-size: 40rpx;
			color: #bcbcbc;

			&.active {
				color: #ff3426;
			}
		}

		view:nth-child(2) {
			width: 180rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background-color: $button-background-disabed-color;
			color: #ffffff;
			border-radius: 50rpx;
			margin-left: auto;

			&.active {
				background-color: #00aa7f;
			}
		}
	}

	.popup-bottom {
		width: 100%;
		height: 600rpx;
		background-color: $primary-backcolor;
	}

	.zy-print-type {
		background-color: #e3e3e3;
		border-radius: 7rpx;
		padding: 0rpx 30rpx;
	}

	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		padding: 10rpx 0rpx;
	}

	.zy-row {
		@include flex-center-row;
		align-items: center;
	}

	.slot-text {
		color: #3b4144;
		font-size: $font-base;
	}

	.zy-input {
		width: 80rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 10rpx 10rpx;
		border-radius: 10rpx;
		border: solid 1rpx #00AA7F;
		text-align: center;
	}

	.zy-protocol {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		width: 710rpx;
		margin: 0rpx 20rpx;
		padding: 15rpx 10rpx;
		height: 400rpx;
		border: solid 1rpx #bdbdbd;
		border-radius: 15rpx;

		.view-content {
			width: 100%;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: row;
			align-items: center;

			// height: 400rpx;
			// padding-top: 20rpx;
			.popup-content {
				margin: 10rpx 20rpx;
				width: 200rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 350rpx;

				.popup-column {
					width: 200rpx;
					border: solid 1rpx #bdbdbd;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					height: 300rpx;
					flex-wrap: wrap;

					view {
						width: 120rpx;
						height: 70rpx;
						line-height: 70rpx;
						border: solid 1rpx #bdbdbd;
						text-align: center;
						color: #bdbdbd;

						&.view-active {
							border: solid 1rpx #00aa7f;
							color: #00aa7f;
						}
					}

					.view {
						margin: 0rpx 5rpx;
						width: 70rpx;
						height: 50rpx;
						line-height: 50rpx;

						&.view-active {
							border: solid 1rpx #00aa7f;
							color: #00aa7f;
						}
					}


				}

				.print-type-number-active {
					border: solid 1rpx #00aa7f;
					color: #00aa7f;
				}

				text {
					margin-top: 20rpx;
					color: #bdbdbd;
				}
			}

		}
	}
</style>
